<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
<!-- 事件调用的方法没有参数-->
  <button @click="btn1click">按钮1</button>


<!--  在事件定义时省略了小括号，但是方法本身需要一个参数-->
  <button @click="btn2click(123)">按钮2</button>
<!--  如果函数需要参数，但是没有传入，那么函数的形参为undefined-->
  <button @click="btn2click()">按钮2</button>
  <!--  在事件定义时省略了小括号，但是方法本身需要一个参数，这个时候VUE会将浏览器生成的event事件对象作为参数传递到方法中-->
  <button @click="btn2click">按钮2</button>


<!--  在方法定义时，我们需要event对象，同时又需要其他参数-->
<!--  在调用方法时，如何手动获取到浏览器产生的event对象呢，在传参的时候使用：$event-->
  <button @click="btn3click(123, $event)">按钮3</button>



</div>

<script src="../js/vue.js"></script>
<script>
    const vue = new Vue({
        el:'#app',
        data:{
            message:'你好呀',
            event:'coderwhy',
            abc:123,
        },
        methods:{
            btn1click(){
                console.log('btn1click');
            },
            btn2click(abc){
                console.log('----',abc);
            },
            btn3click(abc ,event){
                console.log('++++', abc, event);
            }
        }
    })





  //如果函数需要参数，但是没有传入，那么函数的形参为undefined
  // function abc(name) {
  //     console.log(name);
  // }
  // abc()

</script>

</body>
</html>